<template>
  <div>
    <div class="daz">
      严防境外疫情输入
      <div class="xiaozi">做好防范，海外归来，及时隔离</div>
    </div>
    <div>
      <el-button
        class="butc"
        @click="toAdd"
        icon="el-icon-circle-plus"
        type="primary"
        round
        >申请出境</el-button
      >
    </div>

    <el-dialog
      :title="title"
      :visible.sync="visible"
      :before-close="beforeClose"
    >
      <!-- {{ form }} -->
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="name"
          ><el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item
          label="出入时间"
          :label-width="formLabelWidth"
          prop="exittime"
        >
          <el-date-picker
            v-model="form.exittime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item
          label="外出范围"
          :label-width="formLabelWidth"
          prop="range"
        >
          <el-radio v-model="form.range" label="广西区内"></el-radio>
          <el-radio v-model="form.range" label="广西区外"></el-radio>
        </el-form-item>

        <el-form-item
          label="外出事由"
          :label-width="formLabelWidth"
          prop="reason"
        >
          <el-input
            v-model.number="form.reason"
            type="textarea"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="外出地区"
          :label-width="formLabelWidth"
          prop="pcaData"
        >
          <el-cascader-panel
            :props="{ value: 'label' }"
            v-model="form.pcaData"
            :options="regionData"
          ></el-cascader-panel>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="toCancel">取 消</el-button>
        <el-button type="primary" @click="toSave('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>

    <el-row :gutter="0">
      <el-col :span="12" v-for="(item, index) in res" :key="index">
        <el-card shadow="hover" class="box-card">
          <div slot="header" class="clearfix">
            <span>出境记录</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="handleDelete(index)"
              >删除</el-button
            >
          </div>
          <div>
            姓名：{{ item.name }}
            <br />
            外出时间：{{ moment(item.exittime[0]).format("YYYY-MM-DD") }}—至—{{
              moment(item.exittime[1]).format("YYYY-MM-DD")
            }}
            <br />
            外出地区：{{ item.pcaData[0] }}、{{ item.pcaData[1] }}、{{
              item.pcaData[2]
            }}
            <br />
            外出原因：{{ item.reason }}
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "../utils/request";
import { regionData } from "element-china-area-data";
import moment from "moment";
export default {
  data() {
    return {
      res: JSON.parse(localStorage.getItem("res")) || [],
      regionData,
      title: "",
      visible: false,
      form: {},
      pcaData: "",
      formLabelWidth: "120px",
      total: 0,
      tableData: [],
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        reason: [{ required: true, message: "外出原因", trigger: "blur" }],
        exittime: [
          { required: true, message: "请在选择外出时间", trigger: "change" },
        ],
        range: [
          { required: true, message: "请在选择外出范围", trigger: "change" },
        ],
        pcaData: [
          { required: true, message: "请在选择外出地区", trigger: "change" },
        ],
      },
    };
  },

  computed: {},
  methods: {
    moment,
    toCancel() {
      this.$refs["ruleForm"].resetFields();
      this.visible = false;
    },
    beforeClose(done) {
      this.$refs["ruleForm"].resetFields();
      done();
    },
    toAdd() {
      this.form = {};
      this.visible = true;
      this.title = "出入境信息";
    },
    // 把数据存在sessionStorage里，sessionStorage接收json字符串,所以用stringify转字符串
    toSave(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          // let res = this.form;
          //   this.res.push(this.form);
          this.res.push({ ...this.form });
          localStorage.setItem("res", JSON.stringify(this.res));
          this.toCancel();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    handleDelete(index) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //   localStorage.removeItem("res");
          //这两句删除内存空间     let res = JSON.parse(localStorage.getItem("res"));     this.res.splice(index, 1);
          //   res.splice(index, 1);这句删除数据模型
          let res = JSON.parse(localStorage.getItem("res"));
          res.splice(index, 1);
          this.res.splice(index, 1);
          //   delete res[0];
          localStorage.setItem("res", JSON.stringify(res));
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },

  created() {},
  mounted() {},
};
</script>
<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
  margin-bottom: 20px;
  margin-left: 20px;
}
.butc {
  margin-top: 10px;
  margin-bottom: 20px;
  margin-left: 20px;
}
.daz {
  font-weight: bold;
  text-align: center;
  font-size: 70px;
  height: 200px;
  background-size: 100%;
  background-color: turquoise;
  box-sizing: border-box;
  padding-top: 50px;
  position: relative;
}
.xiaozi {
  font-size: 20px;
  position: absolute;
  right: 10px;
  font-weight: bold;
}
</style>